# Loader API

The Loader API is built-in by default. Use it as shown below.

```tsx showLineNumbers filename="HomeActivity.loader.ts" copy
import { ActivityLoaderArgs, useLoaderData } from "@stackflow/react/future";

export function homeActivityLoader({ params }: ActivityLoaderArgs<"HomeActivity">) {
  return {
    // ...
  }
}
```

Automatically filled with types.
```tsx showLineNumbers filename="HomeActivity.tsx" copy {4}
import { homeActivityLoader } from "./HomeActivity.loader";

export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
  const loaderData = useLoaderData<typeof homeActivityLoader>();
}
```

In the `stackflow.config.ts` file, insert the created loader.
```tsx showLineNumbers filename="stackflow.config.ts" copy {9}
import { defineConfig } from "@stackflow/config";
import { homeActivityLoader } from "../components/HomeActivity.loader";

export const config = defineConfig({
  activities: [
    {
      name: "HomeActivity",
      route: "/",
      loader: homeActivityLoader,
    },
    {
      name: "MyProfileActivity",
      route: "/my-profile",
    }
  ],
  transitionDuration: 270,
});
```
